<template>
  <div class="platform-settings">
    <h3>{{ $t('message.platformSettings') }}</h3>
    
    <el-form :model="settingsForm" :rules="settingsRules" ref="settingsFormRef" label-width="150px">
      <el-form-item :label="$t('message.platformName')" prop="platformName">
        <el-input 
          v-model="settingsForm.platformName" 
          :placeholder="$t('message.pleaseEnterPlatformName')"
        ></el-input>
      </el-form-item>
      
      <el-form-item :label="$t('message.platformDescription')" prop="platformDescription">
        <el-input 
          v-model="settingsForm.platformDescription" 
          type="textarea"
          :rows="3"
          :placeholder="$t('message.pleaseEnterPlatformDescription')"
        ></el-input>
      </el-form-item>
      
      <el-form-item :label="$t('message.contactEmail')" prop="contactEmail">
        <el-input 
          v-model="settingsForm.contactEmail" 
          :placeholder="$t('message.pleaseEnterContactEmail')"
        ></el-input>
      </el-form-item>
      
      <el-form-item :label="$t('message.maintenanceMode')" prop="maintenanceMode">
        <el-switch
          v-model="settingsForm.maintenanceMode"
        ></el-switch>
      </el-form-item>
      
      <el-divider />
      
      <el-form-item :label="$t('message.minDepositAmount')" prop="minDepositAmount">
        <el-input-number 
          v-model="settingsForm.minDepositAmount" 
          :min="0" 
          :precision="2"
          :step="1"
          :placeholder="$t('message.pleaseEnterMinDepositAmount')"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      
      <el-form-item :label="$t('message.maxDailyWithdrawal')" prop="maxDailyWithdrawal">
        <el-input-number 
          v-model="settingsForm.maxDailyWithdrawal" 
          :min="0" 
          :precision="2"
          :step="1"
          :placeholder="$t('message.pleaseEnterMaxDailyWithdrawal')"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      
      <el-form-item :label="$t('message.depositFeePercent')" prop="depositFeePercent">
        <el-input-number 
          v-model="settingsForm.depositFeePercent" 
          :min="0" 
          :max="100"
          :precision="2"
          :step="0.1"
          :placeholder="$t('message.pleaseEnterDepositFeePercent')"
          style="width: 100%"
        ></el-input-number> %
      </el-form-item>
      
      <el-form-item :label="$t('message.transactionFeePercent')" prop="transactionFeePercent">
        <el-input-number 
          v-model="settingsForm.transactionFeePercent" 
          :min="0" 
          :max="100"
          :precision="2"
          :step="0.1"
          :placeholder="$t('message.pleaseEnterTransactionFeePercent')"
          style="width: 100%"
        ></el-input-number> %
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="saveSettings">{{ $t('message.saveSettings') }}</el-button>
        <el-button @click="loadSettings">{{ $t('message.reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '@/stores/auth';

export default {
  name: 'PlatformSettings',
  setup() {
    const { t } = useI18n();
    const authStore = useAuthStore();
    
    // 设置表单数据
    const settingsForm = reactive({
      platformName: '',
      platformDescription: '',
      contactEmail: '',
      maintenanceMode: false,
      minDepositAmount: 0,
      maxDailyWithdrawal: 0,
      depositFeePercent: 0,
      transactionFeePercent: 0
    });
    
    const settingsFormRef = ref();
    
    // 表单验证规则
    const settingsRules = {
      platformName: [
        { required: true, message: t('message.pleaseEnterPlatformName'), trigger: 'blur' }
      ],
      contactEmail: [
        { required: true, message: t('message.pleaseEnterContactEmail'), trigger: 'blur' },
        { type: 'email', message: t('message.emailFormatError'), trigger: 'blur' }
      ],
      minDepositAmount: [
        { required: true, message: t('message.pleaseEnterMinDepositAmount'), trigger: 'blur' },
        { type: 'number', min: 0, message: t('message.amountMustBePositive'), trigger: 'blur' }
      ],
      maxDailyWithdrawal: [
        { required: true, message: t('message.pleaseEnterMaxDailyWithdrawal'), trigger: 'blur' },
        { type: 'number', min: 0, message: t('message.amountMustBePositive'), trigger: 'blur' }
      ],
      depositFeePercent: [
        { required: true, message: t('message.pleaseEnterDepositFeePercent'), trigger: 'blur' },
        { type: 'number', min: 0, max: 100, message: t('message.percentageRangeError'), trigger: 'blur' }
      ],
      transactionFeePercent: [
        { required: true, message: t('message.pleaseEnterTransactionFeePercent'), trigger: 'blur' },
        { type: 'number', min: 0, max: 100, message: t('message.percentageRangeError'), trigger: 'blur' }
      ]
    };
    
    // 获取系统设置
    const loadSettings = async () => {
      try {
        const response = await fetch('/api/admin/settings', {
          headers: {
            'Authorization': `Bearer ${authStore.token}`,
            'Content-Type': 'application/json'
          }
        });
        
        if (response.ok) {
          const data = await response.json();
          Object.assign(settingsForm, data);
        } else {
          ElMessage.error(t('message.failedToLoadSettings'));
        }
      } catch (error) {
        console.error('Error loading settings:', error);
        ElMessage.error(t('message.failedToLoadSettings'));
      }
    };
    
    // 保存系统设置
    const saveSettings = async () => {
      try {
        await settingsFormRef.value.validate();
        
        const response = await fetch('/api/admin/settings', {
          method: 'PUT',
          headers: {
            'Authorization': `Bearer ${authStore.token}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(settingsForm)
        });
        
        if (response.ok) {
          ElMessage.success(t('message.settingsSavedSuccessfully'));
        } else {
          const errorData = await response.json();
          ElMessage.error(errorData.message || t('message.settingsSaveFailed'));
        }
      } catch (error) {
        console.error('Error saving settings:', error);
        ElMessage.error(t('message.settingsSaveFailed'));
      }
    };
    
    onMounted(() => {
      loadSettings();
    });
    
    return {
      settingsForm,
      settingsFormRef,
      settingsRules,
      loadSettings,
      saveSettings
    };
  }
};
</script>

<style scoped>
.platform-settings {
  padding: 20px;
}
</style>